<template>
	<view>

		<view class="details_top">
			<view class="dfk">待支付，还剩<u-count-down :timestamp="findcountdown(orderDatas)" :show-days="true" :show-border="true" font-size="56" color="#333333" bgColor="#fff" separator-color="#333333" border-color="#ffffff"></u-count-down></view>
			<view class="goods_info u-flex">
				<view class="goods_img">
					<image :src="packageimage(packageDetailsImages)" mode="aspectFill"></image>
				</view>
				<view class="goods_name">
					<view>{{packageDetails.name || ''}}</view>
					<view class="u-flex">探店奖励：付{{orderDatas.price}}返{{orderDatas.rebate_amount}}<span>¥{{orderDatas.price}}</span></view>
				</view>
			</view>
		</view>

		<view class="info_address u-flex">
			<view class="info_address_left">
				<view class="left_1 text-Omit u-flex">{{shopsData.name}}</view>
				<view class="left_2 u-flex"><u-icon name="map" color="#666666" size="30"></u-icon><span class="text-Omit">{{shopsData.address}}</span></view>
				<view class="left_2 u-flex"><u-icon name="clock" color="#666666" size="28"></u-icon>{{shopsData.open_time}}-{{shopsData.close_time}}
				</view>
			</view>
			<view class="info_address_right u-flex">
				<view class="right_1" @click="Daohang()">
					<image :src="BestImgUrl+'/PackageDetails/Group 34759.png'"></image>
					<view>导航</view>
				</view>
				<view class="right_1" @click="Tel()">
					<image :src="BestImgUrl+'/PackageDetails/Group 34758.png'"></image>
					<view>电话</view>
				</view>
			</view>
		</view>
		
		<view class="details_info3">
			<view class="title">套餐详情</view>
			<view class="list_info_wrap" v-if="goodsData.length != 0">
				<view class="list_item u-flex" v-for="(itemg,indexg) in goodsData" :key="indexg">
					<text>{{itemg.name}}</text>
					<text>（{{itemg.num || '0'}}份）</text>
					<view>¥{{itemg.price || '0.00'}}</view>
				</view>
			</view>
			<view v-else>
				<u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
			</view>
		</view>
		
		<view class="details_info3">
			<view class="title">使用须知</view>
			<view class="list_info_wrap">
				<view class="list_tile u-flex"><span></span>有效期</view>
				<view class="list_item u-flex">
					<text>{{packageDetails.days}}天</text>
				</view>
			</view>
			<view class="list_info_wrap">
				<view class="list_tile u-flex"><span></span>使用时间</view>
				<view class="list_item u-flex">
					<text>{{packageDetails.usage_time}}</text>
				</view>
			</view>
			<view class="list_info_wrap">
				<view class="list_tile u-flex"><span></span>使用规则</view>
				<view class="list_item u-flex">
					<text>
						{{packageDetails.activity_rules}}
					</text>
				</view>
			</view>
		</view>
		
		<view class="details_info2">
			<view class="title">订单信息</view>
			<view class="info_list u-flex">
				<view>订单号</view>
				<span>{{orderDatas.order_no}}</span>
			</view>
			<view class="info_list u-flex">
				<view>手机号</view>
				<span>{{userInfo.username}}</span>
			</view>
			<view class="info_list u-flex">
				<view>下单时间</view>
				<span>{{orderDatas.create_time}}</span>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		<view style="height: 180rpx;"></view>
		<view class="bottom-btn-wrap">
			<view class="bottom-fixed-btn" @click="TopPaySuccess()">
				<view class="btn pay">继续支付¥{{orderDatas.price || '0.00'}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				orderID: '',
				orderDatas: {},
				shopsData: {},
				packageDetails: {},
				goodsData: [],
				userInfo: {},
				packageDetailsImages: []
			}
		},
		onLoad(ops) {
			let Details = JSON.parse(decodeURIComponent(ops.data))
			console.log('订单数据', Details)
			//订单ID
			this.orderID = Details.id
		},
		onShow() {
			//获取订单详情
			this.GetDatails()
			//获取我的信息
			this.GetMyinfo()
		},
		methods: {
			GetDatails() {
				let that = this
				that.$api.GetTanDianOrderDetails({
					order_id: this.orderID,
					is_new: '',
					client: ''
				}).then(res => {
					console.log('订单详情', res.data.result);
					that.orderDatas = res.data.result
					
					that.shopsData = res.data.result.shop //店铺信息
					that.packageDetails = res.data.result.package //套餐数据
					that.goodsData = res.data.result.package.goods //套餐商品
					that.packageDetailsImages = res.data.result.package.images
			
				}).catch(err => {
			
				})
			},
			GetMyinfo(){
				let that = this
				that.$api.GetuserInfo({
				
				}).then(res => {
					console.log('个人信息', res.data.result);
					that.userInfo = res.data.result
				}).catch(err => {
					
				})
			},
			Daohang() {
				wx.openLocation({
					latitude: Number(this.shopsData.latitude),
					longitude: Number(this.shopsData.longitude),
					scale: 18,
					name: this.shopsData.name,
					address: this.shopsData.address
				});
			},
			Tel() {
				uni.makePhoneCall({
					phoneNumber: this.shopsData.tel, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			packageimage(data){
				return data[0]
			},
			//倒计时计算
			findcountdown(item) {
				const now = new Date().getTime();
				let endTime = new Date(item.end_time).getTime()
				let isend = endTime - now > 0 ? (endTime - now) : 0;
				let seconds = this.$moment(isend).unix();
				console.log('结束时间',seconds)
				return seconds
			},
			TopPaySuccess(){
				let that = this
				uni.showLoading({
					title: '支付中'
				})
				setTimeout(()=>{
					that.$api.PayPackageOrder({
						order_id: that.orderID,
						pay_type: 'applet_wechat' //支付方式：applet_wechat小程序支付,wechat 公众号支付，app_wechat微信APP支付，alipay支付宝支付，app_alipay支付宝APP支付
					}).then(res => {
						console.log('支付参数', res.data.result);
						
						uni.hideLoading()
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.data.result.timeStamp,
							nonceStr: res.data.result.nonceStr,
							package: res.data.result.package,
							signType: res.data.result.signType,
							paySign: res.data.result.paySign,
							success: function(reswxminapp) {
								that.GetDatails()
								uni.navigateTo({
									url: '/subpackageA/pages/PaySuccess/PaySuccess?order_id=' + that.orderID + '&name=' + that.shopsData.name + '&price=' + that.orderDatas.price
								});
							},
							fail: function(errwxmini) {
								uni.hideLoading()
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						});
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 3000
						});
						uni.hideLoading()
					});
				},2000)
			},
			MoNiOrderWanChengs(){
				let that = this
				that.$api.MoNiOrderWanCheng({
					order_id: that.orderID,
				}).then(res => {
					console.log('模拟订单完成', res.data.result);
				}).catch(err => {
					
				})
			}
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.details_top {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 0 0 24rpx 24rpx;
		margin-bottom: 30rpx;

		.dfk {
			color: $zzy-text-color-333333;
			font-weight: bold;
			font-size: 52rpx;
		}

		.goods_info {
			align-items: center;
			margin-top: 34rpx;

			.goods_img {
				width: 96rpx;
				height: 96rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 16rpx;
				}
			}

			.goods_name {
				padding-left: 16rpx;
				flex: 1;

				view:nth-child(1) {
					font-weight: bold;
					color: $zzy-text-color-333333;
				}

				view:nth-child(2) {
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					flex: 1;

					span {
						color: $zzy-text-color-333333;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.info_address {
		align-items: center;
		justify-content: space-between;
		border-radius: 24rpx;
		background-color: #ffffff;
		padding: 28rpx;
		margin-top: 32rpx;
		margin-bottom: 30rpx;

		.info_address_left {
			flex: 1;

			.left_1 {
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;
				-webkit-line-clamp: 1;
			}

			.left_2 {
				align-items: center;
				margin-top: 12rpx;
				color: $zzy-text-color-666666;
				font-size: 28rpx;

				.text-Omit {
					-webkit-line-clamp: 1;
				}

				.u-icon {
					margin-right: 10rpx;
				}
			}
		}

		.info_address_right {
			align-items: center;
			justify-content: center;

			.right_1 {
				text-align: center;
				flex: 1;
				margin: 0 0 0 30rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 6rpx;
				}

				color: $zzy-text-color-666666;
				font-size: 22rpx;
			}
		}
	}
	
	.details_info3 {
		padding: 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: 30rpx 0;
	
		.title {
			font-size: 30rpx;
			color: $zzy-text-color-333333;
			font-weight: bold;
			width: 200rpx;
			height: 54rpx;
			margin-bottom: 24rpx;
		}
	
		.list_info_wrap {
			align-items: center;
			padding: 0 22rpx 0 22rpx;
			margin-top: 20rpx;
	
			.list_tile {
				color: $zzy-text-color-333333;
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;
	
				span {
					display: inline-block;
					width: 6rpx;
					height: 6rpx;
					border-radius: 200rpx;
					background-color: $zzy-text-color-999999;
					margin-right: 10rpx;
				}
			}
	
			.list_item {
				align-items: flex-start;
				margin-top: 12rpx;
				padding-left: 16rpx;
	
				text:nth-child(1) {
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					flex: 1;
				}
	
				text:nth-child(2) {
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					margin-left: auto;
				}
	
				text:nth-child(3) {
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					font-weight: bold;
					margin-left: auto;
				}
			}
		}
	}
	
	.details_info2 {
		padding: 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: 30rpx 0;
	
		.title {
			font-size: 30rpx;
			color: $zzy-text-color-333333;
			font-weight: bold;
			width: 200rpx;
			height: 54rpx;
			margin-bottom: 16rpx;
		}
	
		.info_list {
			margin-top: 16rpx;
			align-items: flex-start;
	
			view {
				color: $zzy-text-color-333333;
				font-size: 28rpx;
				font-weight: bold;
			}
	
			span {
				padding: 0 0 0 20rpx;
				color: $zzy-text-color-666666;
				font-size: 28rpx;
				display: inline-block;
				flex: 1;
			}
		}
	}
</style>